<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日历插件</title>
    <link rel="stylesheet" href="../src/css/meCalendar.css">
    <style>
        input{
            margin-top: 20px;
            margin-left: 50px;
            margin-bottom: 10px;
        }
    </style>
    <!--来自百度的cdn-->
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="../src/js/jquery-calendar.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#mydate").calendar({
                format: 'yyyy-MM-dd',//默认格式yyyy-MM-dd
                beginYear: 2014,
                endYear: 2030,
                max: new Date(),//最大时间设置只能为Date,默认不设置
                istoday: true  //设置初始时间为今天
                //callBack:back1 //回调
            });
            $("#mydate1").calendar({
                format: 'yyyy年MM月dd',
                beginYear: 2000,
                endYear: 2020,
                min: new Date(),
                //callBack:back2

            });
            $("#mydate2").calendar({
                format: 'yyyy年MM月dd',
                beginYear: 2015,
                endYear: 2020,
                min: new Date(),
                callBack:back2
            });
        });
        function back1(time) {
            //console.log("first invoded:"+time);
        }
        function back2(time) {
            console.log("second invoded:"+time);
        }
    </script>
</head>
<body>
<p>本日历是我在2015年初做项目开发时寻找了很多的日历控件最后都觉得样式太丑，所以基于jquery开发了这款日历</p>
日历的功能包括：
<ul>
    <li>可以根据需求设置自己的日期格式</li>
    <li>可以自定义日历的年显示范围</li>
    <li>可以指定日历的可选日期范围</li>
    <li>支持点击日历的事件控制</li>
</ul>
<div id="example1">Usage 1: 设置日期格式yyyy-MM-dd，设置可选最大日期为今天,设置默认时间为今天</div>
<input type="text" id="mydate" placeholder="日期"/>
<div id="example2">Usage 2: 设置日期格式yyyy年MM月dd,设置最小可选时间为今天</div>
<input type="text" id="mydate1" placeholder="日期"/>
<div id="example3">Usage 3: 日期格式yyyy年MM月dd,绑定点击回调事件打印点解日期(ps:请查看console控制台)</div>
<input type="text" id="mydate2" placeholder="日期"/>
<div id="example4">Usage 4:简单方式使用日历控件</div>
<input type="text" id="mydate3" placeholder="日期" data-toggle="calendar"/>

</body>
</html>